<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			input[type=text] {
				color: red;
			}
			div {
				width: 100px;
				height: 100px;
				background-color: rgba(0, 0, 0, .3);
			}
		  div::before {
				content: '我';
			}
			div::after {
				content: 'hello';
			}
		</style>
		
	</head>
	<body>
		<!-- 
	  （1）属性选择器：
		 div[type]含有type
		 div[type=text]type为text
		 div[class^="icon"]以icon开头
		 div[class$="icon"]以icon结尾
		 div[class*="icon"]含有icon
		 
		 属性选择器和类选择器、伪类选择器权重都是10
		 
		 
		 （2）结构伪类选择器
		 e:first-child父元素的第一个子元素
		 e:last-child父元素的最后一个子元素
		 e:nth-child(n)父元素中的第n个字元素
		 e:first-of-type类型e的第一个
		 e:last-of-type类型e的最后一个
		 e:nth-of-type(n)类型e的第n个
		 
		 n里面可以使用even或者odd；2n也相当于偶数，2n+1表示奇数；5n表示5的倍数，5，10，15....
		 -n+5表示前五个
		 n+5表示第五个开始到最后
		 
		 nth-child和nth-of-type区别：
		 nth-of-type会把指定元素的盒子排列序号,先找到e，再去找第n个孩子
		 nth-child先找到第n个孩子，再去看看是否和e匹配
		 所以这两个顺序相反
		 
		 
		 （3）伪元素选择器
		 ::before在元素前面插入内容
		 ::after在元素后面插入内容
		 伪元素选择器和标签选择器一样，权重都是1
		 content必须要写，如果设置宽高需要转换为块级元素
		 
		 -->
		 <input type="text" name="" id="" value="请输入用户名" />
		 <input type="password" name="" id="" value="请输入密码" />
		 <div id="">
		 	是
		 </div>
	</body>
</html>
